﻿@model PhoneBook.Models.Contacts.ContactAddOrEditModel
@using PhoneBook.Core.Domain.Phones
@using PhoneBook.Models.Contacts
@using PhoneBook.Models.UserGroups;
@using System.Web.Script.Serialization;



@{
}


<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">联系人</a></li>
        <li><a href="#tabs-2">电话</a></li>
        <li><a href="#tabs-3">组</a></li>
    </ul>
    <div id="tabs-1">
        <p>
            @Html.Partial("_ContactAddOrEdit")
        </p>
    </div>
    <div id="tabs-2">
        <div id="phoneEditPanel" data-bind="visible:ContactSaved">
            @Html.Partial("_PhoneAddOrEdit")
        </div>
        <div  data-bind="visible:ContactSaved()==false">
            <span>先保存联系人信息</span>
        </div>
    </div>
    <div id="tabs-3">
        <div id="userGroupEditPanel"  data-bind="visible:ContactSaved">
            @Html.Partial("_UserGroupAddOrEdit")
        </div>
        <div  data-bind="visible:ContactSaved()==false">
            <span>先保存联系人信息</span>
        </div>
    </div>
</div>



<script>
    var tabs;
    $(function () {
        tabs = $("#tabs").tabs();
        tabs.tabs('select', 0);
    });


    function validateContactForm() {
        $.validity.start();

        $('#UserName').require("pleaes input username");

        var result = $.validity.end();
        return result.valid;
    }

</script>

@{
    var contactAddModel = Model;
    var jsonContactAddModel = new HtmlString(new JavaScriptSerializer().Serialize(contactAddModel));
}

<script>
 

    function PhoneViewModel(selectedPhoneType,phoneNumber) {
        this.SelectedPhoneType =  ko.observable(selectedPhoneType);
        this.PhoneNumber =  ko.observable(phoneNumber);
    }

    function UserGroupViewModel(groupId,groupName) {
        this.GroupName = ko.observable(groupName);
        this.GroupId= ko.observable(groupId);
    }

    var initialData = @jsonContactAddModel;
    function ContactAddOrEditModel() {

        var self = this;
        self.UserName = ko.observable(initialData.UserName);
        self.Memo = ko.observable(initialData.Memo);

     
        self.ContactId = ko.observable(initialData.ContactId);
        self.ContactSaved = ko.observable(initialData.ContactId!=0);


        self.SaveContact = function() {
            if (!validateContactForm()) {
                return;
            } else {
                $.ajax("@Url.Action("SaveContact", "Contact")", {
                    data: ko.toJSON(self),
                    type: "post",
                    contentType: "application/json",
                    success: function(result) {
                        if (result.Status == "success") {
                            alert('保存成功');
                            
                            var contactId = result.ContactId;
                            model.ContactId(contactId);
                            model.ContactSaved(true);
                        }
                        else {
                            alert('保存失败');
                        }
                    }
                });
            }
        };

        //phones
        var tempPhones = $.map(initialData.Phones, function(a) {
            return new PhoneViewModel(a.SelectedPhoneType, a.PhoneNumber);
        });

        self.Phones = ko.observableArray(tempPhones);
        self.AvailablePhoneTypes = ko.observableArray(['手机', '家电']);

        self.AddPhone = function() {
            self.Phones.push(new PhoneViewModel('手机', ''));
        };
        self.DelPhone = function(p) {
           
             self.Phones.remove(p);
        };

        //usergroups
        var tempUserGroups = $.map(initialData.UserGroups, function(a) {
            return new UserGroupViewModel(a.GroupId, a.GroupName);
        });
        self.UserGroups = ko.observableArray(tempUserGroups);

        var tempSelectedUserGroupids = $.map(initialData.UserGroups, function(a) {
            if (a.Checked) {
                return a.GroupId + '';
            }
        });
        self.SelectedUserGroupIds = ko.observableArray(tempSelectedUserGroupids);
        self.newGroup = ko.observable('');

        self.SaveNewUserGroup = function() {
            $.ajax("@Url.Action("AddNewUserGroup", "Usergroups")", {
                data: ko.toJSON({GroupName:self.newGroup()}),
                type: "post",
                contentType: "application/json",
                success: function(result) {
                    if (result.status == "success") {
                        alert('创建组成功');
                        self.UserGroups.push(new UserGroupViewModel(result.GroupId, result.GroupName));
                    }
                }
            });

        };
    }

    var model = new ContactAddOrEditModel();
    ko.applyBindings(model);            


 
</script>

